<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/* 相对定位，box2图片压到box1图片上 */
			div.box1 img{
				width: 150px;
				height: 250px;
				/* 声明一个相对定位与方向属性 */
				position: relative;
				left: 513px;
				top: 10px;
				z-index: 2;
			}
			div.box2 img{
				width: 250px;
				height: 250px;
				position: absolute;
				    left: 487px;
				    top: -243px;
					z-index: 1;
				}
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位 相对与父元素定位
				  功能：单一元素定位，元素在正常文档流中，推荐
			 position属性：relative; 生命元素可以用相对定位意义
					  方向属性： left、right、top、bottom
					  z轴堆叠顺序属性：z-index
							数值，数值越大，越靠前
					绝对定位：按照定位祖先【页面左上角】进行定位
					功能：脱离文档流，不占据原空间
					方向属性和叠加属性和相对以及固定定位共用!
				position属性：absolute;声明文员可以使用绝对定位
					
				实际开发中：相对定位结合绝对定位一起使用
						   相对栏、左栏、遮罩层【挂靠】
		 -->
		 <div class="box1"><img src="img/1.png" alt="若楠" /></div>
		 <div class="box2"><img src="img/2.png" alt="哪托" /></div>
	</body>
</html>